<template>
    <div class="dispatch-app">
        <div v-show="isShowMengCeng" class="meng-ceng">
            <van-loading type="spinner" color="white" class="meng-loading"/>
        </div>
        <div class="header-list">
            <div class="header-tab van-hairline--bottom">
                <div class="list-tab" @click="checkTab('0')" :class="activeTab == '0'?'border-r header-active':'border-r'">
                    未指派({{navList.unassigned?navList.unassigned.count:'0'}})
                </div>
                <div class="list-tab" @click="checkTab('1')" :class="activeTab == '1'?'border-r header-active':'border-r'">
                    已指派({{navList.assigned?navList.assigned.count:'0'}})
                </div>
                <div class="list-tab" @click="checkTab('2')" :class="activeTab == '2'?'header-active':''">司机</div>
            </div>
            <div class="header-style-check  van-hairline--bottom" v-if="activeTab == '0' || activeTab == '1' ">
                <van-tabs style="width: 100%;" v-model="selectTab">
                    <van-tab v-for="(item,index) in statusList" :title="item.name + '(' + item.count + ')'" :key="index"></van-tab>
                </van-tabs>
                <van-icon name="search" class="search-icon" @click="openSearch = !openSearch"/>
            </div>
            <div class="header-search" v-if="activeTab == '2'">
                <div class="header-search-s" style="width: 100%;">
                    <van-search placeholder="输入司机条件" show-action v-model="searchValue" @search="onSearch"></van-search>
                </div>
            </div>
            <div class="header-search" v-if="openSearch">
                <div class="header-search-select" v-if="activeTab == '0' || activeTab == '1'">
                    <!--<select name="area" id="area" v-model="selectArea">-->
                    <!--<option value="all">全部区域</option>-->
                    <!--<option :value="item.id" v-for="(item) in areaList">{{item.name}}</option>-->
                    <!--</select>-->
                    <!--<van-icon name="arrow-down" class="icon-po"/>-->
                    <div @click="openPopup">区域选择</div>
                    <div class="select-right"></div>
                </div>
                <div class="header-search-select" v-if="activeTab == '0' || activeTab == '1'">
                    <select name="productType" v-model="productType">
                        <option value="0">全部产品</option>
                        <option value="3">当日达</option>
                        <option value="4">次日达</option>
                    </select>
                    <!--<van-icon name="arrow-down" class="icon-po"/>-->
                    <div class="select-right"></div>
                </div>
                <div class="header-search-s" v-if="activeTab == '0' || activeTab == '1'">
                    <van-search placeholder="输入条件" show-action v-model="searchValue" @search="onSearch">
                    </van-search>
                </div>
            </div>

        </div>
        <div class="content" v-if="activeTab == '0' || activeTab == '1'">
            <!--<scroller :style="{paddingTop: numb + 'rem'}" :on-refresh="refresh" :on-infinite="infinite">-->
            <scroller :style="{paddingTop: numb + 'rem'}" :on-infinite="infinite" ref="myScroller">
                <div style="padding-bottom: 1rem">
                    <van-checkbox-group v-model="dispatchOrderObj.checkboxModel" style="padding:0 0.1rem 0rem">
                        <div class="card" v-for="(item,index) in checkboxData" :key="index">
                            <van-row>
                                <van-col span="5" class="checkbox-top">
                                    <van-checkbox :name="item.id" class="checkbox"></van-checkbox>
                                </van-col>
                                <van-col span="12" class="order-id">
                                    <div @click="showOrder(item.id)">{{item.full_dingdong}}</div>
                                </van-col>
                                <van-col span="7" class="date">
                                    <div @click="showOrder(item.id)">
                                        {{item.forecast_pickup_time | dateFmt}}~{{item.forecast_complete_time | dateFmt}}
                                    </div>
                                </van-col>
                            </van-row>
                            <div @click="showOrder(item.id)">
                                <van-row style="overflow: hidden;">
                                    <van-col span="5" class="status">{{item.status_link}}</van-col>
                                    <van-col span="9" class="product">
                                        <template v-if="item.product && item.product.type==4" style="color:red">
                                            次{{item.forecast_complete_time.slice(8,10)}}
                                        </template>
                                        <template v-else>
                                            {{item.product?item.product.title:''}}
                                            {{item.forecast_complete_time.slice(8,10)}}号
                                        </template>
                                    </van-col>
                                    <van-col span="10" class="types">{{item.res_link}} {{item.total_weight}}kg
                                        {{item.volume_link}}
                                    </van-col>
                                </van-row>
                                <van-row style="overflow: hidden;">
                                    <van-col span="5">
                                        <img src="../../assets/img/ji@2x.png" alt="" class="img">
                                    </van-col>
                                    <van-col span="19">
                                        <van-col span="24"><span class="name">[{{item.pick_name}}]</span>
                                            <span class="tel">{{item.pick_phone}}</span></van-col>
                                        <van-col span="24" class="address">{{item.pick_address}}{{item.pick_address_add}}</van-col>
                                    </van-col>
                                </van-row>
                                <van-row style="overflow: hidden;">
                                    <van-col span="5">
                                        <img src="../../assets/img/shou@2x.png" alt="" class="img">
                                    </van-col>
                                    <van-col span="19">
                                        <van-col span="24">
                                            <span class="name">[{{item.delivery_name}}]</span><span class="tel">{{item.delivery_phone}}</span>
                                        </van-col>
                                        <van-col span="24" class="address">{{item.delivery_address}}{{item.delivery_address_add}}</van-col>
                                    </van-col>
                                </van-row>
                                <!--<van-row  style="overflow: hidden;"  v-if="item.executable_related_mission && item.executable_related_mission.length > 0 && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                                <van-row style="overflow: hidden;" v-if="item.executable_related_mission && item.executable_related_mission.length > 0">
                                    <van-col span="5" style="text-align: center">
                                        任务:
                                    </van-col>
                                    <van-col :span="19">
                                        <div>
                                            <span class="tel">{{item.executable_related_mission[0]['driver']['name']}}</span>
                                            前去
                                            <span class="tel">{{item.executable_related_mission[0]['address']}}</span>
                                        </div>
                                    </van-col>
                                </van-row>
                                <!--<van-row  style="overflow: hidden;"  v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0  && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                                <van-row style="overflow: hidden;" v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0">
                                    <van-col span="5" style="text-align: center">
                                        任务:
                                    </van-col>
                                    <van-col :span="19">
                                        <div>
                                            <span class="tel">{{item.inexecutable_related_mission[0]['driver']['name']}}</span>
                                            前去
                                            <span class="tel">{{item.inexecutable_related_mission[0]['address']}}</span>
                                        </div>
                                    </van-col>
                                </van-row>

                            </div>
                        </div>
                    </van-checkbox-group>
                </div>
            </scroller>
        </div>
        <div class="footer" v-if="activeTab == '0' || activeTab == '1'">
            <div @click="checkedAll">
                <van-checkbox v-model="allChecked" v-if="activeTab == '0' || activeTab == '1'">全选</van-checkbox>
            </div>
            <div style="line-height: 1.2;">
                <div style="font-size: 0.14rem;">已选中: {{dispatchOrderObj.checkboxModel.length}}</div>
                <div style="font-size: 0.14rem;color: red;">总计: {{totalNum}}</div>
            </div>

            <div class="btn-box">
                <div v-if="isShowBtn" style="font-size: 0.12rem;padding-right: 0.1rem" @click="goSetting">
                    切换账号
                </div>
                <div class="btn" @click="dispatch">指派</div>
            </div>
        </div>
        <div class="content" v-if="activeTab == '2'" style="overflow-y: scroll;height: 100%;padding-bottom: 0.1rem;position: relative;top: 0.88rem;">
            <!--<scroller style="padding-top: 0.88rem" :on-refresh="refreshDriver" :on-infinite="infiniteDriver">-->
            <van-loading type="spinner" v-if="isshow" style="margin: 0.5rem auto 0;"/>
            <div style="padding: 0rem 0.1rem 0rem;">
                <div v-if="!isshow && driverList.length === 0" style="color: rgb(170, 170, 170);text-align: center;margin-top: 0.4rem;font-size: 16px">
                    没有更多数据
                </div>
                <van-row class="card" style="padding-left: 0.1rem" v-for="(item,index) in driverList" :key="index" v-if="!isshow && driverList.length !== 0">
                    <div @click="SeeDriverTask(item.id)">
                        <van-col :span="24">
                            <van-col :span="12">姓名：<span class="black" style="margin-right: 8px">{{item.name}}</span>
                            </van-col>
                            <van-col :span="12">电话：<span class="tel">{{item.phone|phoneFmt}}</span></van-col>
                        </van-col>
                        <van-col :span="24" style="padding-top: 0.05rem">
                            <van-col :span="12">车牌：<span class="black">{{item['driver']?item['driver']['car_number']:''}}</span>
                            </van-col>
                            <van-col :span="12">已有任务：<span class="black">{{item['undone_order_mission_count']}}</span>
                            </van-col>
                        </van-col>
                    </div>
                </van-row>
            </div>
            <!--</scroller>-->
        </div>

        <!--<van-popup v-model="showPopup" position="right" :overlay="true">-->
            <!--<div class="popup">-->
                <!--<express-assignment :params-id="checkboxModel" v-model="showPopup" @refresh="refreshList" v-if="showPopup"></express-assignment>-->
            <!--</div>-->
        <!--</van-popup>-->
        <!--<van-popup v-model="showPopupDriver" position="right" :overlay="true">-->
            <!--<div class="popup">-->
                <!--<driver-task :driver-task="driverTask" v-model="showPopupDriver"  @operationTask="operationTask" v-if="showPopupDriver"></driver-task>-->
            <!--</div>-->
        <!--</van-popup>-->
        <van-popup v-model="dispatchOrderObj.showPopup" position="right" :overlay="true">
            <div class="popup">
                <express-assignment v-model="dispatchOrderObj" @refreshList="refreshList" @changeAll="allChecked=false" v-if="dispatchOrderObj.showPopup"></express-assignment>
            </div>
        </van-popup>
        <van-popup v-model="driverTaskObj.showPopupDriver" position="right" :overlay="true">
            <div class="popup">
                <driver-task v-model="driverTaskObj"  @operationTask="operationTask" v-if="driverTaskObj.showPopupDriver"></driver-task>
            </div>
        </van-popup>
        <van-popup v-model="showPopupDriverTaskOrder" position="right" :overlay="true">
            <div class="popup">
                <driver-task-order :driver-task-order="driverTaskOrder" v-model="showPopupDriverTaskOrder" v-if="showPopupDriverTaskOrder" @changeDispatch="changeDispatch"></driver-task-order>
            </div>
        </van-popup>
        <van-popup v-model="showPopupSelect" :overlay="true">
            <div class="popup" style="background-color: #fff;padding-bottom: 1rem;">
                <van-checkbox-group v-model="checkSelectArea">
                    <van-cell-group>
                        <van-cell
                                v-for="(item,index) in areaList"
                                clickable
                                :key="index"
                                :title="item.name"
                                @click="toggle(index)">
                            <van-checkbox :name="item.id" ref="checkboxes"/>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
                <div class="popup-footer">
                    <van-button type="default" @click="cancelSelect">取消</van-button>
                    <van-button type="primary" style="background-color: #108EE9;border-color: #108EE9" @click="confirmSelect">确定</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {native} from '../app.js';
    import ExpressAssignment from '../dispatch/ExpressAssignment';
    import DriverTask from '../dispatch/DriverTask';
    import DriverTaskOrder from '../dispatch/DriverTaskOrder';
    import {
        Tab,
        Dialog,
        Tabs,
        Cell,
        CellGroup,
        Icon,
        Search,
        Checkbox,
        CheckboxGroup,
        Row,
        Col,
        Notify,
        Popup,
        Button,
        Toast,
        Field,
        Loading,
        Actionsheet
    } from 'vant';
    export default {
        name: "Index",
        components: {
            ExpressAssignment,
            DriverTask,
            DriverTaskOrder,
            [Tab.name]: Tab,
            [Dialog.name]: Dialog,
            [Field.name]: Field,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Actionsheet.name]: Actionsheet,
            [Icon.name]: Icon,
            [Search.name]: Search,
            [Notify.name]: Notify,
            [Popup.name]: Popup,
            [Toast.name]: Toast,
            [Button.name]: Button,
            [Loading.name]: Loading,
            [Row.name]: Row,
            [Col.name]: Col,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [Tabs.name]: Tabs
        },
        data() {
            return {
                driverTaskObj: {
                    driverTask: [], //司机任务
                    driverNoTask: [], //司机无任务订单列表
                    showPopupDriver: false, // 司机任务popup
                    isShow: false, // loading
                    checkboxTask: [] // 选中的司机任务
                },
                dispatchOrderObj: {
                    checkboxModel: [], // 被选中待指派的id
                    checkDataList: [], // 被选中待指派的列表
                    showPopup: false // 指派popup
                },
                selected: '',
                searchValue: '',
                isshow: false,
                isShowMengCeng: false,  // 全局蒙层
                dispatchRefresh: false,  // 是否是指派后刷新
                checkboxData: [],
                // checkboxModel: [],
                driverList: [],
                checkSelectArea: [],
                allChecked: false,
                openSearch: false,
                // showPopup: false,
                showPopupDriver: false,   // 司机任务popup
                showPopupDriverTaskOrder: false,  // 每个司机对应任务下订单显示popup
                showPopupSelect: false,
                isShowBtn: false,
                page: 1,
                numb: 0.88,
                times: null,
                totalNum: 0,
                pageSize: 40,
                hasData:1,
                driverTask: [],  //司机任务
                driverTaskOrder: {}, //司机任务对应运单
                activeTab: '0',
                selectTab: null,
                selectTabLinShi: null,  // 临时保存的选中tab
                selectTabLinShiIndex: null,  // 临时保存的选中tab index
                selectStatus: '',
                // selectArea: 'all',
                selectArea: [],
                orderApi: 'express/order',
                statusApi: 'express/order/nav',
                areaApi: 'express/area',
                navApi: 'express/order/dispatch_count',
                // navApi: 'express/order/dispatch_order_nav',
                driverApi: 'common/user/driver',
                totalDriverNum: null,
                navList: {},
                statusList: [],
                areaList: [],
                orderId: [], // 待指派的订单id组合
                query: {}, // 参数
                userInfo: {}, // 用户信息
                productType: '0',
                clickDriverId: null,  // 临时保存的被点击的司机id
                arrList: []  // 临时保存
            }
        },
        watch: {
            'dispatchOrderObj.checkboxModel': function (newVal,oldVal) {
                // console.info('newVal',newVal);
                // console.info('oldVal',oldVal);
                // if (newVal.length > oldVal.length) {
                //     newVal.forEach(item1=>{
                //         this.checkboxData.forEach(item2=>{
                //             if (item1 == item2.id) {
                //                 this.dispatchOrderObj.checkDataList.push(item2);
                //             }
                //         });
                //     });
                //     this.dispatchOrderObj.checkDataList = this.arrQuChong(this.dispatchOrderObj.checkDataList);
                // } else if (newVal.length < oldVal.length) {
                //     this.dispatchOrderObj.checkDataList.forEach((item,index)=>{
                //         if (this.getArrDifference(newVal,oldVal) == item.id) {
                //             this.dispatchOrderObj.checkDataList.splice(index,1);
                //         }
                //     });
                // } else {
                //     if (this.getArrDifference(newVal,oldVal) == 0 && newVal.length !== 0 && oldVal.length !== 0) {
                //         newVal.forEach(item1=>{
                //             this.checkboxData.forEach(item2=>{
                //                 if (item1 == item2.id) {
                //                     this.dispatchOrderObj.checkDataList.push(item2);
                //                 }
                //             });
                //         });
                //         this.dispatchOrderObj.checkDataList = this.arrQuChong(this.dispatchOrderObj.checkDataList);
                //     } else {
                //         this.dispatchOrderObj.checkDataList = [];
                //     }
                //
                // }
                // console.info('checkDataList',this.dispatchOrderObj.checkDataList);
                if (newVal.length > 40) {
                    Toast({
                        message: '已勾选40单,还有' + Number(this.totalNum-40) + '单请下次指派',
                        duration: 1000,
                        type: 'fail'
                    });
                    this.dispatchOrderObj.checkboxModel = this.dispatchOrderObj.checkboxModel.slice(0,40);
                    this.allChecked = false;
                } else {
                    // if (this.activeTab === '0') {
                    //     if (this.checkboxData.length > 0 && this.checkboxModel.length > 0 && this.checkboxModel.length === this.checkboxData.length) {
                    //     if (this.checkboxData.length > 0 && this.checkboxModel.length > 0) {
                            // this.allChecked = true;
                        // } else {
                            // this.allChecked = false;
                        // }
                    // } else if (this.activeTab == '1') {
                    //     this.allChecked = false;
                    //     if (newVal && newVal.length === 2) {
                    //         this.checkboxModel = [newVal[1]];
                    //     } else if (newVal && newVal.length === 1) {
                    //         this.checkboxModel = newVal;
                    //     }
                    // }

                }

            },
            searchValue: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.isShowMengCeng = true;
                    this.onSearch();
                }, 500)
            },
            selectArea: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.isShowMengCeng = true;
                    this.onSearch();
                }, 500)
            },
            productType: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.isShowMengCeng = true;
                    this.onSearch();
                }, 500)
            },
            openSearch: function (val) {
                if (val) {
                    this.numb = 1.3;
                } else {
                    this.numb = 0.88;
                }
            },
            selectTab: function (val) {
                this.checkStatusTab(val);
            }
        },
        filters: {
            phoneFmt: (phone) => {
                phone += "";
                let three = phone.slice(0, 3), center = phone.slice(3, 7), last = phone.slice(7);
                return `${three} ${center} ${last}`;
            },
            dateFmt:(date)=>{
                return date.slice(11,16);
            }
        },
        created() {
            try {
                this.userInfo = native.getUser();
                native.setTitle('调度');
                if (this.userInfo) {
                    let userInfo = JSON.parse(this.userInfo);
                    sessionStorage.setItem('token',  userInfo.api_token);
                    if (userInfo.driver) {
                        sessionStorage.setItem('cityId', userInfo.driver.site);
                    } else {
                        Notify({
                            message: '城市获取错误！',
                            duration: 1000,
                            background: '#f44'
                        });
                    }
                } else {
                    this.$router.push({path: '/login/index'});
                }
            } catch (e) {
                this.isShowBtn = true;
                console.log('出现错误, 如果在非android环境下访问, 出现该警告是正常的.')
            }
            this.isShowMengCeng = true;
            this.getStatusList();
            this.getNavData();
            this.getAreaList();
            native.initTopbar('{"backCallbackFunc":"goBack"}');
            window['goBack'] = () => {
                this.goBack();
            };
        },
        methods: {
            checkedAll() {
                if (!this.allChecked) {//实现反选
                    if (this.dispatchOrderObj.checkboxModel.length == 40) {
                        Dialog.confirm({
                            title:'谨慎操作',
                            message: `<div style="text-align: center">只能选中<span style="font-size: 16px;color: red;">40</span>个,此操作会 <span  style="font-size: 16px;color: red;">取消全部选中</span>。</div></br><div style="text-align: center">是否继续？</div>`
                        }).then(() => {
                            this.dispatchOrderObj.checkboxModel = [];
                        }).catch(() => {
                            this.allChecked = true;
                            this.checkedAll();
                        });
                    }
                    // let chekcdata = this.dispatchOrderObj.checkboxModel.filter(item=>{
                    //     this.checkboxData.forEach(item1=>{
                    //         return item = item1.id;
                    //     })
                    // })
                    // if (chekcdata && chekcdata.length > 0) {
                        if (this.checkboxData.length > 0) {
                            this.dispatchOrderObj.checkboxModel.reverse().splice(0,this.checkboxData.length);
                        }
                    // } else {
                    //
                    // }

                } else {//实现全选
                    if (this.dispatchOrderObj.checkboxModel.length == 40) {
                        Dialog.confirm({
                            title:'谨慎操作',
                            message: `<div style="text-align: center">只能选中<span style="font-size: 16px;color: red;">40</span>个,此操作会 <span  style="font-size: 16px;color: red;">取消全部选中</span>。</div></br><div style="text-align: center">是否继续？</div>`
                        }).then(() => {
                            this.dispatchOrderObj.checkboxModel = [];
                        }).catch(() => {

                        });
                    }
                    this.checkboxData.forEach(item => {
                        this.dispatchOrderObj.checkboxModel.push(item.id);
                    });
                    this.dispatchOrderObj.checkboxModel = this.uniq(this.dispatchOrderObj.checkboxModel);
                }
            },
            getArrDifference(arr1, arr2) {
                return arr1.concat(arr2).filter(function (v, i, arr) {
                    return arr.indexOf(v) === arr.lastIndexOf(v);
                });
            },  // 找出数组中不同的项
            uniq(array){
                let temp = [];
                let index = [];
                let l = array.length;
                for(let i = 0; i < l; i++) {
                    for(let j = i + 1; j < l; j++){
                        if (array[i] === array[j]){
                            i++;
                            j = i;
                        }
                    }
                    temp.push(array[i]);
                    index.push(i);
                }
                return temp;
            },// 数组去重
            arrQuChong(array){
                let temp = [];
                let index = [];
                let l = array.length;
                for(let i = 0; i < l; i++) {
                    for(let j = i + 1; j < l; j++){
                        if (array[i].id === array[j].id){
                            i++;
                            j = i;
                        }
                    }
                    temp.push(array[i]);
                    index.push(i);
                }
                return temp;
            },// 数组去重
            changeDispatch(val) {
                this.dispatchOrderObj.showPopup = true;
                this.dispatchOrderObj.checkboxModel = val;
            }, // 任务改派
            operationTask(val) {
                if (val.type == 'check') {  // 查看任务详情
                    this.showPopupDriverTaskOrder = true;
                    this.getDriverTaskOrder(val.id);
                } else if (val.type == 'complete') { // 完成指定任务
                    Dialog.confirm({
                        message: '确定完成已选中任务？'
                    }).then(() => {
                        this.completeTask(val.id);
                    }).catch(() => {
                    });
                } else if (val.type == 'cancel') { // 取消指定任务
                    Dialog.confirm({
                        message: '确定取消已选中任务？'
                    }).then(() => {
                        this.cancelTask(val.id);
                    }).catch(() => {
                    });
                }
            },   // 任务的操作
            completeTask(id) {
                this.$http.put('express/mission/' + id + '/complete')
                    .then((response) => {
                        Toast.success('任务完成成功!');
                        this.driverTaskObj.checkboxTask = [];  // 清除完成后已经选中的
                        this.SeeDriverTask(this.clickDriverId);
                        this.getDriverList();
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            }, // 完成任务
            cancelTask(id) {
                this.$http.put('express/mission/' + id + '/cancel')
                    .then((response) => {
                        Toast.success('任务取消成功!');
                        this.driverTaskObj.checkboxTask = [];  // 清除取消后已经选中的
                        this.SeeDriverTask(this.clickDriverId);
                        this.getDriverList();
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            }, // 取消任务
            getDriverTaskOrder(driverId) {
                this.$http.get('express/mission/' + driverId)
                    .then((response) => {
                        this.driverTaskOrder = response.data.data;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
            },
            confirmSelect() {
                this.showPopupSelect = false;
                this.selectArea = this.checkSelectArea;
            },
            cancelSelect() {
                // this.checkSelectArea = [];
                this.showPopupSelect = false;
            },
            openPopup() {
                this.showPopupSelect = true;
            },
            goSetting() {
                this.$router.push({path: "/setting/index"});
            },
            getDriverNoTaskOrder(id) {
                this.driverTaskObj.driverNoTask = [];
                this.$http.get('express/order?pageSize=200&dispatch_status$=<1&status$=>0,<99&driver_id$=' + id)
                    .then((response) => {
                        this.driverTaskObj.driverNoTask = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },
            SeeDriverTask(id) {
                this.clickDriverId = id;
                this.driverTaskObj.isShow = true;
                this.driverTaskObj.showPopupDriver = true;
                this.getDriverNoTaskOrder(id);
                this.$http.get('express/mission?mission_status=uncompleted&pageSize=200&driver_id=' + id)
                    .then((response) => {
                        this.driverTaskObj.driverTask = response.data.data;
                        this.driverTaskObj.isShow = false;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        this.driverTaskObj.isShow = false;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },
            goBack() {
                if (this.dispatchOrderObj.showPopup) {
                    this.dispatchOrderObj.showPopup = false;
                } else if (this.showPopupDriverTaskOrder) {
                    this.showPopupDriverTaskOrder = false;
                } else if (this.driverTaskObj.showPopupDriver) {
                    this.driverTaskObj.showPopupDriver = false;
                } else if (this.showPopupSelect) {
                    this.showPopupSelect = false;
                } else {
                    native.onJSCallBack(0);
                }
            },
            showOrder(id) {
                try {
                    native.showOrderDetail(id);
                } catch (e) {
                    console.log('出现错误, 如果在非android环境下访问, 出现该警告是正常的，查看不了.')
                }

            },
            checkStatusTab(val) {
                this.statusList.forEach((item, index) => {
                    if (val === index) {
                        if (this.dispatchRefresh) {
                            this.page = 1;
                            this.hasData = 0;
                            this.isShowMengCeng = true;
                            this.selectTab = this.selectTabLinShiIndex;
                            this.selectStatus = this.selectTabLinShi;
                            this.dispatchOrderObj.checkboxModel = [];
                            // this.checkboxData = [];
                            this.getOrderList();
                        } else {
                            this.page = 1;
                            this.hasData = 0;
                            this.isShowMengCeng = true;
                            this.selectTabLinShiIndex = val;
                            this.selectStatus = item.type;
                            this.selectTabLinShi = item.type;
                            this.dispatchOrderObj.checkboxModel = [];
                            // this.checkboxData = [];
                            this.searchValue = '';
                            this.checkSelectArea = [];
                            this.selectArea = [];
                            this.productType = '0';
                            this.openSearch = false;
                        }

                    }
                })
            },
            refreshList() {
                this.dispatchRefresh = true;
                this.isShowMengCeng = true;
                this.getStatusList();
                this.getNavData();
                this.allChecked =false;
                this.dispatchOrderObj.showPopup = false;
            },
            getNavData() {
                this.$http.get(this.navApi)
                    .then((response) => {
                        this.navList = response.data.data;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },   // 获取未指派和已指派数据
            getAreaList() {
                let query = {};
                query['pageSize'] = 300;
                query['status'] = 1;
                query['@sort'] = 'name.asc';
                this.$http.get(this.$larfree.httpQuery(query, this.areaApi))
                    .then((response) => {
                        this.areaList = response.data.data;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },  // 获取区域数据
            getStatusList() {
                this.$http.get('express/order/nav?dispatchType=' + this.activeTab)
                    .then((response) => {
                        this.statusList = response.data.data;
                        // this.page = 1;
                        this.selectTab = 0;
                        this.checkStatusTab(0);

                    })
                    .catch((error) => {
                        this.hasData = 1;
                        this.isShowMengCeng = false;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },
            checkTab(num) {
                this.activeTab = num;
                this.isShowMengCeng = true;
                if (num !== '2') {
                    this.allChecked = false;
                    this.dispatchOrderObj.checkboxModel = [];
                    this.getNavData();
                    this.getStatusList();
                    this.driverList = [];
                } else {
                    this.openSearch = false;
                    this.page = 1;
                    this.hasData = 0;
                    this.dispatchOrderObj.checkboxModel = [];
                    this.checkboxData = [];
                    this.getDriverList();
                }
            },
            getOrderList() {   // 获取运单信息
                let query = {};
                query['pageSize'] = this.pageSize;
                query['page'] = this.page;
                if (this.activeTab == '0') {
                    query['orderDispatchStatus'] = this.selectStatus;
                    query['@sort'] = 'full_dingdong.asc';
                }

                if (this.activeTab == '1') {
                    query['orderDispatchStatus'] = this.selectStatus;
                    query['@sort'] = 'status.asc';
                }

                query['dispatchType'] = this.activeTab;
                query['name'] = this.searchValue;
                if (this.selectArea && this.selectArea.length > 0) {
                    query['end_area$'] = '[' + this.selectArea + ']';
                } else {
                    query['end_area$'] = this.selectArea;
                }
                if (this.productType !== '0')
                    query['product_type'] = this.productType;

                this.$http.get(this.$larfree.httpQuery(query, this.orderApi))
                    .then((response) => {
                        this.totalNum = response.data.meta.total;
                        if (this.page === 1) {
                            this.checkboxData = [];
                        }
                        if (response.data.data.length !== 0) {
                            this.arrList = this.checkboxData.filter((item)=>{
                               return item.id == response.data.data[0].id
                            });
                            if (this.arrList.length == 0) {
                                response.data.data.forEach((item)=>{
                                    if (this.allChecked) {
                                        this.dispatchOrderObj.checkboxModel.push(item.id);
                                    }
                                    this.dispatchOrderObj.checkboxModel = this.uniq(this.dispatchOrderObj.checkboxModel);
                                    this.checkboxData.push(item);
                                });
                            }
                        } else {
                            this.hasData = 1;
                        }
                        this.isShowMengCeng = false;
                        this.dispatchRefresh = false;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        this.isShowMengCeng = false;
                        this.dispatchRefresh = false;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },
            getDriverList() {
                // this.isshow = true;
                let query = {};
                query['name'] = this.searchValue;
                this.$http.get(this.$larfree.httpQuery(query, this.driverApi))
                    .then((response) => {
                        // if (this.page === 1) {
                        //     this.checkboxData = [];
                        // }
                        // if (response.data.data.length !== 0) {
                        //     for (let key in response.data.data) {
                        //         if (this.checkboxData && this.checkboxData.length > 0) {
                        //             if (this.checkboxData[0].id == response.data.data[0].id) {
                        //                 this.checkboxData = response.data.data;
                        //             } else {
                        //                 this.checkboxData.push(response.data.data[key]);
                        //             }
                        //         } else {
                        //             this.checkboxData.push(response.data.data[key]);
                        //         }
                        //     }
                        //     this.hasData = 0;
                        // } else {
                        //     this.hasData = 1;
                        // }
                        // this.isshow = false;
                        this.isShowMengCeng = false;
                        this.driverList = response.data.data;
                    })
                    .catch((error) => {
                        this.hasData = 1;
                        // this.isshow = false;
                        this.isShowMengCeng = false;
                        if (error.response.data.msg) {
                            this.$notify({
                                message: error.response.data.msg,
                                duration: 1000,
                                background: '#f44'
                            });
                        } else {
                            this.$notify({
                                message: '请求错误：' + error.response.status,
                                duration: 1000,
                                background: '#f44'
                            });
                        }
                    });
            },   // 获取司机列表
            onSearch() {
                if (this.activeTab == '0' || this.activeTab == '1') {
                    this.page = 1;
                    this.hasData = 0;
                    this.allChecked = false;
                    this.getOrderList();
                } else if (this.activeTab == '2') {
                    this.page = 1;
                    this.getDriverList();
                }

            }, // 搜索运单
            dispatch() {
                if (this.dispatchOrderObj.checkboxModel && this.dispatchOrderObj.checkboxModel.length > 0) {
                    if (this.dispatchOrderObj.checkboxModel.length <= 40) {
                        this.dispatchOrderObj.showPopup = true;
                    } else {
                        Toast({
                            message: '已勾选40单,还有' + Number(this.totalNum-40) + '单请下次指派',
                            duration: 1500,
                            type: 'fail'
                        });
                    }
                } else {
                    Toast({
                        message: '请选择运单！',
                        duration: 1000
                    });
                }

            }, // 指派任务
            refresh(done) {
                this.dispatchOrderObj.checkboxModel = [];
                this.hasData = 0;
                this.page = 1;
                setTimeout(() => {
                    this.getOrderList();
                    done();
                }, 1500);
            },
            infinite(done) { // 加载更多插件
                if (this.hasData) { // 代表没有 更多数据了
                    done(true);
                } else {
                    this.getOrderList();
                    setTimeout(() => {
                        setTimeout(() => {
                            this.page++;
                            done();
                        }, 1500);
                    }, 600);
                }
            }
        }
    }
</script>

<style lang="less">
    .header-list {
        position: fixed;
        top: 0px;
        left: 0px;
        height:auto;
        z-index: 10;
        width: 100%;
        background-color: #fff;
        .header-tab {
            width: 100%;
            height: 0.42rem;
            font-size: 0.16rem;
            color: #303030;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div.list-tab {
                width: 33.333%;
                height: 0.42rem;
                text-align: center;
                line-height: 0.42rem;
            }
            .border-r {
                border-right: 1px solid #ebedf0;
            }
            .header-active {
                color: #108EE9;
                border-bottom: 2px solid #108EE9;
            }

        }
        .header-search {
            width: 100%;
            height: 0.42rem;
            display: flex;
            line-height: 0.42rem;
            box-shadow: 0 0px 1px 1px #eee;
            .header-search-select {
                width: 1.2rem;
                text-align: center;
                position: relative;

                display: flex;
                justify-content: space-around;
                select {
                    width: 98%;
                    font-size: 0.14rem;
                    text-align: center;
                    text-align-last: center;
                    appearance: none;
                    -moz-appearance: none;
                    -webkit-appearance: none;
                    border: none;
                    background: #fff;
                    outline: none;
                    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                }
                .icon-po {
                    font-size: 0.08rem;
                    position: absolute;
                    z-index: 20;
                    color: #000;
                    top: 0.17rem;
                    right: 0.06rem;
                }
                .select-right {
                    width: 0.02rem;
                    height: 0.16rem;
                    background-color: #eee;
                    position: relative;
                    top: 0.13rem;
                }
            }
            .header-search-s {
                width: 100%;
                .van-search .van-cell__left-icon {
                    display: none;
                }
                .van-search {
                    background-color: #fff !important;
                    height: 0.42rem !important;
                    padding: 7px 0
                }
                input::-webkit-input-placeholder {
                    color: #C2C2C2 !important;
                }
            }
        }
        .header-style-check {
            width: 100%;
            /*height: 0.4rem;*/
            padding-right: 0.34rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            .van-tabs__line {
                background-color: #108EE9;
            }
            .van-tab--active {
                color: #108EE9;
            }
            .search-icon {
                position: absolute;
                right: 0.06rem;
                top: 0.12rem;
                font-size: 0.2rem;
                color: #999;
            }
        }

    }
    .dispatch-app {
        .meng-ceng{
            position: fixed;
            top: 0px;
            left: 0px;
            z-index:50000;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.2);
            .meng-loading{
                margin: 48vh auto 0;
                width: 80px;
                height: 80px;
                background-color: rgba(0, 0, 0, 0.5);
                padding: 20px;border-radius: 10px
        }
        }
        .popup-footer {
            position: fixed;
            bottom: 0px;
            left: 0px;
            display: flex;
            justify-content: space-around;
            padding: 0.06rem 0;
            background-color: #fff;
            width: 100%;
            box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.43);
        }
        .van-button {
            width: 1.6rem;
        }
        .van-tabs__wrap {
            overflow-y: hidden;
            overflow-x: scroll;
        }
        .van-tabs__nav--line {
            width: 160%;
        }
        .van-checkbox__icon, .van-checkbox__label {
            height: 0.22rem !important;
            line-height: 0.21rem !important;
            font-size: 0.14rem !important;
            color: #4A4A4A !important;
        }
        .content {
            .van-checkbox__icon .van-icon {
                width: 0.22rem !important;
                height: 0.22rem !important;
                border: 1px solid #108EE9 !important;
                line-height: 0.22rem !important;
            }
        }
        .footer {
            .van-checkbox__icon .van-icon {
                width: 0.18rem !important;
                height: 0.18rem !important;
                border: 1px solid #108EE9 !important;
                line-height: 0.18rem !important;
            }
        }
        .van-popup {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }
        .van-radio__input {
            height: auto;
        }

    }

    .dispatch-app {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        background-color: #EAEAEA;
        .popup {
            width: 100%;
            height: 100%;
            background-color: #EAEAEA;
            overflow-y: scroll;
            .van-button {
                padding: 0 0.3rem !important;
            }
        }
        .action-sheet-spot {
            max-height: 600px;
            overflow-y: scroll;
            .spot-list {
                border-bottom: 1px solid #eee;
                padding: 0.1rem 0;
                text-align: center;
            }
        }

        .content {
            background-color: #EAEAEA;
            height: 100%;
            overflow: hidden;
            .card {
                /*width: 3.59rem;*/
                margin: 0.08rem auto 0rem;
                padding: 0.12rem 0.22rem 0.12rem 0;
                box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18);
                border-radius: 10px;
                background-color: #fff;
                .checkbox {
                    position: relative;
                    top: 0px;
                    left: 0px;
                    z-index: 9;
                    height: 0.26rem;
                }
                .address {
                    font-size: 0.14rem;
                    color: #4A4A4A;
                }
                .order-id {
                    font-size: 0.18rem;
                }
                .name {
                    color: #727072;
                    font-size: 0.14rem;
                    padding-right: 0.1rem;
                }
                .types {
                    font-size: 0.12rem;
                    text-align: right;
                    color: #9B9B9B;
                    line-height: 0.22rem;
                }
                .product {
                    color: #1F4BA5;
                    font-size: 0.12rem;
                    line-height: 0.22rem;
                }
                .tel {
                    color: #4A90E2;
                    font-size: 0.14rem
                }
                .date {
                    text-align: right;
                    font-size: 0.18rem;
                }
                .status {
                    text-align: center;
                    line-height: 0.22rem;
                }
                .checkbox {
                    text-align: center;
                }
                .img {
                    width: 0.3rem;
                    height: 0.28rem;
                    margin: 0.04rem auto 0;

                }
            }
        }
        .footer {
            width: 100%;
            position: relative;
            z-index: 99;
            height: 0.47rem;
            line-height: 0.45rem;
            background: #FFFFFF;
            box-shadow: 0 0.02rem 0.09rem 0 rgba(0, 0, 0, 0.43);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 0.22rem;
            .btn-box {
                display: flex;
                /*flex-direction: row;*/
            }
            .btn {
                width: 1rem;
                height: 100%;
                background: #108EE9;
                font-size: 0.18rem;
                color: #FFF;
                text-align: center;
                /*line-height: 0.41rem;*/
            }
            /*.btn + .btn {*/
            /*margin-left: 2px;*/
            /*}*/
        }
    }
</style>
